<template>
  <VCharts
    v-if="renderChart"
    :option="options"
    :autoresize="autoResize"
    :style="{ width, height }"
  />
</template>

<script lang="ts" setup>
  import { ref, nextTick, watch } from 'vue';
  import VCharts from 'vue-echarts';

  const props = defineProps({
    options: {
      type: Object,
      default() {
        return {};
      },
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '100%',
    },
  });
  const renderChart = ref(false);
  // wait container expand
  nextTick(() => {
    renderChart.value = true;
  });

  watch(
    // eslint-disable-next-line no-undef
    () => props.options,
    (newOptions) => {
      if (newOptions) {
        renderChart.value = false; // 先禁用渲染
        nextTick(() => {
          renderChart.value = true; // 更新完数据后重新渲染
        });
      }
    },
    { immediate: true }
  );
</script>

<style scoped lang="less"></style>
